<template>
  <div>
    <!-- 轮播banner -->
    <swiper indicator-dots="true" autoplay="true" duration="500" height="180">
      <div v-for="(item,index) in img_list" :key="index">
        <swiper-item>
          <img :src="http+item.inf_picpath" class="slide-image" />
        </swiper-item>
      </div>
    </swiper>

    <!-- 搜索 -->
    <div class="box">
      <input
        class="ipt"
        type="text"
        v-model="sercheThing"
        confirm-type="search"
        placeholder="搜索"
        @confirm="confirma"
      />
      <i-icon type="search" size="20" color="#80848f" @click="confirma" />
    </div>
    <!-- 新闻分类 -->
    <i-tabs :current="current" scroll color="#000" @change="handleChange" i-class="aaaa">
      <i-tab
        v-for="(item,index) in newsName"
        i-class="bbbb  "
        :class="index==0?'fire':''"
        :key="index"
        :title="item.type_name"
        :data-type_id="item.type_id"
        @click="getTypeId($event)"
      ></i-tab>
    </i-tabs>
    <!-- 新闻列表 -->
    <ul>
      <li
        v-for="(item,index) in info_list"
        :data-inf_id="item.inf_id||''"
        :data-inf_source="item.inf_source||''"
        :data-type_id="type_id"
        :data-inf_pdf="item.pdf_dispay=='1'?item.inf_pdf:''"
        :key="index"
        class="infolist"
        @click="routerToDetail($event)"
      >
        <div class="info_wrap">
          <div v-if="item.inf_picpath" class="imgBox">
            <img :src="http+item.inf_picpath" alt />
          </div>
          <div class="textBox">
            <p class="title_1">{{item.inf_title}}</p>
            <p class="inf_describe">{{item.inf_describe}}</p>
          </div>
        </div>
      </li>
    </ul>
    <i-toast id="toast" />
  </div>
</template>
<script>
const { $Toast } = require("../../../static/dist/base/index");
export default {
  data() {
    return {
      http: "https://wx.ssjx88.com/public",
      img_list: [],
      info_list: [],
      newsName: [],
      current: "0", //新闻分类切换
      inf_describe: [],
      sercheThing: "",
      s_page: "3",
      page: 1,
      type_id: "15", //新闻分类id
      is_next: "1", //是否有下一页:0无,1有下一页
      code: "", //返回数据code
      next: "0", //控制下拉循环    1 //开启循环
      newsDetail: []
    };
  },
  created() {},
  onLoad(options) {
   
  },
  //底部样式控制
  onShow: function(options) {
    this.currentBar = 1;
     this.pageinit();
  },
  //首页转发
  onShareAppMessage: function() {
    var that = this;

    return {
      path: `/pages/index/main`
    };
  },
  // 触底加载
  onReachBottom: function() {
    if (this.is_next == "1" && this.code == "200") {
      this.page = this.page + 1;
      this.next = "1";
      this._getNewsList();
      wx.showNavigationBarLoading();
      wx.showLoading({
        title: "加载中"
      });
      setTimeout(function() {
        wx.hideNavigationBarLoading(); //完成停止加载
        wx.stopPullDownRefresh(); //停止下拉刷新
        wx.hideLoading();
      }, 1000);
    } else {
      this.handlToast(); // 没有更多内容
    }
  },
  // 下拉刷新
  onPullDownRefresh: function() {
    // 显示顶部刷新图标
    wx.showNavigationBarLoading();
    this.page = 1;
    this.next = "0";
    this.sercheThing = "";
    wx.showLoading({
      title: "加载中"
    });
    this._getNewsList();
    // 停止下拉动作
    setTimeout(function() {
      wx.hideNavigationBarLoading(); //完成停止加载
      wx.stopPullDownRefresh(); //停止下拉刷新
      wx.hideLoading();
    }, 1000);
  },
  methods: {
    // 初始化调用函数和接口
    pageinit() {
      // 轮播图接口调用
      // this.info_list = [];   
      this.$apis.getSwiperImg().then(res => {
        this.img_list = res.msg;
      });
      // 新闻分类接口调用
      this.$apis.getNewsClassify().then(res => {
        console.log(res.msg);
        this.newsName = res.msg;
      });
      this._getNewsList();
    },
    getTypeId(e) {
      // 获取type_id
      this.info_list = [];
      this.page = 1;
      this.type_id = e.currentTarget.dataset.type_id;
      this._getNewsList();
    },
    // 调用新闻列表接口函数
    _getNewsList() {
      var data = {
        page: this.page,
        s_page: this.s_page,
        search: this.sercheThing,
        type_id: this.type_id
      };
      this.$apis.getNewsList(data).then(res => {
        console.log(res);
       
        if (res.errcode) {
          $Toast({
            content: "没有更多内容"
          });
          setTimeout(() => {
            $Toast.hide();
          }, 2000);
          return
        }
        this.code = res.code;
        if (this.next == "1" && this.code == "200") {
          for (let i = 0; i < res.msg.info.length; i++) {
            res.msg.info.map(item => {
              item.inf_describe = item.inf_describe.trim();
              item.inf_title = item.inf_title.substr(0, 20);
            });
            this.info_list.push(res.msg.info[i]);
          }
          console.log(this.info_list);
          this.is_next = res.msg.is_next;
        } else if (this.next == "0") {
          this.info_list = res.msg.info;

          res.msg.info.map(item => {
            item.inf_title = item.inf_title.substr(0, 20);
            item.inf_describe = item.inf_describe.trim();
          });
          this.is_next = res.msg.is_next;
          console.log(this.info_list);
        }
      });
    },

    // 调用新闻详情接口
    routerToDetail(e) {
      var data = e.currentTarget.dataset.inf_id || "";
      var source = e.currentTarget.dataset.inf_source || "";
      var type_id = e.currentTarget.dataset.type_id;
      var  pdf= e.currentTarget.dataset.inf_pdf;
      if (type_id == "15") {
        wx.navigateTo({
          url: `../newsDetail/main?inf_id=${data}&inf_source=${source}&type_id=${type_id}`
        });
      }else{
          wx.navigateTo({
          url: `../text/main?inf_id=${data}&inf_source=${source}&inf_pdf=${pdf}`
        });
      }
    },
    // 分类控样式
    handleChange(detail) {
      this.current = detail.target.key;
    },
    //搜索确认
    confirma() {
      this.page = 1;
      this.info_list = [];
      this._getNewsList();
      // this.sercheThing = "";
    },
    // 没有内容调用函数
    handlToast() {
      $Toast({
        content: "没有更多内容"
      });
      setTimeout(() => {
        $Toast.hide();
      }, 1000);
    }
  },

  created() {
    // let app = getApp()
  }
};
</script>

<style  lang="scss">
._swiper {
  height: 180px;
  ._swiper-item .slide-image {
    height: 100%;
    width: 100%;
  }
}

.box {
  margin: 5px auto;
  border-radius: 15px;
  height: 30px;
  border: 1px solid #f1f1f1;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f8f8f8;
  width: 90%;
}
.box .ipt {
  font-size: 14px;
  padding: 2px 20px;
  width: 70%;
}
.aaaa {
  // border-top: 1px solid #f8f8f8;
  .bbbb {
    width: 33%;
    border-right: 1px solid #f8f8f8;

    view {
      font: 600 16px Microsoft YaHei;
    }
  }
  .fire {
    background-image: url("");
    background-repeat: no-repeat;
    background-position: 100px 6px;
    background-size: 15px 15px;
  }
}

ul {
  .infolist {
    width: 100%;
    height: 110px;
    border-bottom: 1px solid #f8f8f8;
    .info_wrap {
      margin-top: 20px;
      padding: 0 14px;
      display: flex;
      justify-content: center;
      align-items: flex-start;
    }
    .imgBox {
      width: 140px;
      height: 90px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .textBox {
      flex: 1;
      font-size: 14px;
      padding-left: 10px;
      .title_1 {
        // line-height: 36px;
        // height: 36px;
        font-size: 16px;
        font-weight: 600;
        padding-bottom: 10px;
        color: #333;
      }
      .inf_describe {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
    }
  }
}
</style>
